﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>查询分析</title>
    <script type="importmap">
        {
          "imports": {
            "vue": "https://cdn.jsdmirror.com/npm/vue@2/dist/vue.esm.browser.min.js",
            "vue-demi": "https://cdn.jsdmirror.com/npm/vue-demi/lib/v2.7/index.mjs",
            "vanilla-jsoneditor": "https://cdn.jsdmirror.com/npm/vanilla-jsoneditor",
            "json-editor-vue": "https://cdn.jsdmirror.com/npm/json-editor-vue@0.18/dist/json-editor-vue.mjs"
          }
        }
    </script>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
        }

        li {
            margin: 5px;
            background-color: #f0f0f0;
            padding: 10px;
            cursor: pointer;
        }

            li.selected {
                background-color: #007BFF;
                color: white;
            }
    </style>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="c in clients" @click="setClient(c)" :key="c.id" :class="{ selected: c.Id === client.Id }">{{c.Id}}-{{c.Name}}</li>
        </ul>
        <json-editor-vue v-model="value" :mode.sync="mod"></json-editor-vue>
        <div>当前选择：{{client.Name}}</div>
        <button @click="saveClientSetting">保存</button>
        <button @click="saveClientsSetting">批量保存</button>
    </div>
    <script type="module">
        import Vue from 'vue'
        import JsonEditorVue from 'json-editor-vue'

        var app = new Vue({
            components: { JsonEditorVue },
            data() {
                return {
                    value: undefined,
                    mod: 'text',
                    clients: [],
                    client: {
                        Id: ""
                    }
                }
            },
            mounted: function () {
                this.getClients()
            },
            methods: {
                getClients: function () {
                    axios.get("/getAllMachine").then(function (response) {
                        console.log(response);
                        app.clients = response.data
                        return;
                    });
                },
                setClient: function (client) {
                    app.client = client;
                    app.value = client.Setting;
                },
                saveClientSetting: function () {
                    app.client.Setting = app.value
                    axios.post('updateMachine', app.client).then(function () {
                        app.getClients();
                    })
                },
                saveClientsSetting: function () {
                    app.client.Setting = app.value
                    axios.post('updateMachineSettings', app.client).then(function () {
                        app.getClients();
                    })
                }
            }
        }).$mount('#app')
    </script>
</body>

</html>